<template>
  <view class="index-page u-p-30">
    <!-- <image src="../../static/images/index.jpg" style="width: 750rpx;height: 3739rpx;" mode="aspectFit"></image> -->
    <u-gap height="30" bg-color="#F8FAFB"></u-gap>
    <view class="u-flex u-row-between title">
      <view class="left">
        <image src="/static/images/xue.png" style="width: 364rpx;height: 84rpx;" mode="aspectFit"></image>
        <view class="u-flex u-row-between">
          <text>研</text>
          <text>究</text>
          <text>生</text>
          <text>院</text>
        </view>
      </view>
      <view class="u-flex-1 u-m-l-30 right">
        <view class="">NANHAI</view>
        <view class="">BUDDHISM</view>
        <view class="">ACADEMY</view>
      </view>
    </view>
    <view class="introduction text-golden u-m-t-60 u-font-32">
      <view class="">
        <text>INTRODUCTION</text>
      </view>
      <view class="">
        <text>TO BUDDHISM ACADMY</text>
      </view>
    </view>
    <view class="text-golden u-m-t-20 u-font-30 u-flex u-col-center">
      <u-icon name="/static/images/index/i1.png" size="20"></u-icon>
      <text class="u-m-l-5">学院简介</text>
    </view>
    <view class="u-p-t-40">
      <u-image src="" border-radius="15" width="100%" height="300rpx"></u-image>
    </view>
    <view class="bg-white introduction-text u-p-30">
      <view class="content">
        南海佛学院位于海南省三亚市南山景区，是经过国家宗教事务局文件批复，由海南省民宗委主管、海南省佛教协会主办的三大语系高级佛学院，颁发国家承认学历文凭的本科大学......
      </view>
      <view class="u-flex u-row-center u-p-t-30">
        <text class="text-golden">查看更多</text>
        <u-icon name="arrow-right" color="#C4AD8C"></u-icon>
      </view>
    </view>

    <view class="introduction text-golden u-m-t-60 u-font-32">
      <view class="">
        <text>INTRODUCTION</text>
      </view>
      <view class="">
        <text>TO BUDDHISM ACADMY</text>
      </view>
    </view>
    <view class="text-golden u-m-t-20 u-font-30 u-flex u-col-center">
      <u-icon name="/static/images/index/i2.png" size="20"></u-icon>
      <text class="u-m-l-5">招生简章</text>
    </view>
    <view class="u-p-t-40">
      <u-image src="" border-radius="15" width="100%" height="300rpx"></u-image>
    </view>
    <view class="bg-white introduction-text u-p-30">
      <view class="content">
        即日起开始报名，2022年7月25日报名截止(以报名邮箱收到报名表的时间为准)。
      </view>
      <view class="u-flex u-row-center u-p-t-30">
        <text class="text-golden">查看更多</text>
        <u-icon name="arrow-right" color="#C4AD8C"></u-icon>
      </view>
    </view>

    <view class="introduction text-golden u-m-t-60 u-font-32">
      <view class="">
        <text>DYNAMIC</text>
      </view>
      <view class="">
        <text>OF COLLEGE</text>
      </view>
    </view>
    <view class="text-golden u-m-t-20 u-font-30 u-flex u-row-between">
      <view class="u-flex u-col-center">
        <u-icon name="/static/images/index/i3.png" size="20"></u-icon>
        <text class="u-m-l-5">学院动态</text>
      </view>
      <view class="u-flex u-row-center">
        <text class="">查看更多</text>
        <u-icon name="arrow-right" color="#C4AD8C"></u-icon>
      </view>
    </view>
    <view class="bg-white u-p-30 dynamic u-m-t-30">
      <view class="u-flex u-row-between" :class="{'u-m-t-30':index>0}" v-for="(item,index) in 3" :key="index">
        <u-image border-radius="15" width="240rpx" height="160rpx"></u-image>
        <view class="item u-flex-1 u-m-l-30">
          <view class="">
            南海佛学院公布2017年度新生录取名单
          </view>
          <view class="u-flex u-col-center">
            <u-icon name="clock" size="15"></u-icon>
            <text class="text-tips u-m-l-15">2022-07-11</text>
          </view>
        </view>
      </view>
    </view>

    <view class="introduction text-golden u-m-t-60 u-font-32">
      <view class="">
        <text>JOURNAL</text>
      </view>
      <view class="">
        <text>OF FUBAO</text>
      </view>
    </view>
    <view class="text-golden u-m-t-20 u-font-30 u-flex u-row-between">
      <view class="u-flex u-col-center">
        <u-icon name="/static/images/index/i4.png" size="20"></u-icon>
        <text class="u-m-l-5">《福报》期刊</text>
      </view>
      <view class="u-flex u-row-center">
        <text class="">查看更多</text>
        <u-icon name="arrow-right" color="#C4AD8C"></u-icon>
      </view>
    </view>
    <view class="journal u-m-t-30">
      <view class="bg-white u-flex u-row-between u-col-center u-p-30" :class="{'u-border-top':index>0}"
        v-for="(item,index) in 3" :key="index">
        <view class="u-flex-1">
          <view class="text-black u-font-30 u-m-b-15">
            《福报》第十五期
          </view>
          <view class="u-flex u-col-center">
            <u-icon name="clock" size="15"></u-icon>
            <text class="text-tips u-m-l-15">2022-07-11</text>
          </view>
        </view>
        <view class="right u-m-l-30 text-golden">
          <view class="btn u-flex u-col-center u-row-center">
            <u-icon name="/static/images/index/i5.png" size="32"></u-icon>
            <text class="u-m-l-10">阅读</text>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="60" bg-color="#F8FAFB"></u-gap>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {

    },
    methods: {
      test() {
        console.log(this.vuex_user, this.$api)
        this.$u.toast('l')
        this.$u.vuex('vuex_user', {
          a: +new Date()
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F8FAFB;
  }
</style>
<style lang="scss" scoped>
  .index-page {
    .title {
      .left {
        width: 364rpx;
      }

      .right {
        height: 130rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #B5B4B4;
        letter-spacing: 2rpx;
      }
    }

    .introduction {
      font-weight: 300;
      letter-spacing: 2rpx;
    }

    .introduction-text {
      text-indent: 20rpx;

      .content {
        line-height: 48rpx;
      }
    }

    .dynamic {
      .item {
        height: 160rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    .journal {
      overflow: hidden;
      border-radius: 15rpx;

      .btn {
        width: 200rpx;
        border-radius: 80rpx;
        border: 1px solid #C4AD8C;
      }
    }
  }
</style>
